<template>
    <customNavigationBar :title="title" />

    <view class="content">
        <template v-if="list?.records?.length != 0">
            <view class="card">
                <view class="item" v-for="(item, index) in list?.records" :key="item.phone">
                    <view class="avatar">
                        <image :src="item?.avatar" mode="aspectFit"></image>
                    </view>

                    <view class="info">
                        <view>
                            {{ item?.nickName }}
                        </view>
                        <view>
                            {{ item?.createdAt }}
                        </view>
                    </view>
                </view>
            </view>
        </template>
        <template v-else>
            <view class="noData">暂无数据</view>
        </template>
    </view>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue';
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
import { getUserInfoMethod, homeApis, userApis } from '@/utils/apis';

/**
 * 角色0 推客   num 5  推广用户列表
 * 角色1 管家   num 3  所管小区用户列表  6 邀请管家列表
 * 角色2 运营   num 3  所管区域管家列表  6 邀请运营列表
 *
 * 角色4 省代   num 2  所管区域运营列表  3 所管区域管家列表
 */

const num = ref(0);
const userRole = ref(0);
const title = ref('');
onLoad((e) => {
    num.value = e.num;
    userRole.value = JSON.parse(uni.getStorageSync('userInfomation')).identityType;
});
const pageParams = ref({
    current: 1,
    size: 20
});

onShow(() => {
    getList();
});

onReachBottom(() => {
    if (pageParams.value.current < list.value.pages) {
        pageParams.value.current++;
        getList();
    }
});

const list = ref(null);
const getList = async () => {
    let res = null;
    if (userRole.value == 0) {
        title.value = '我的用户';
        res = await userApis.getCustomerList(pageParams.value);

        res.data.records = res.data.records.map((i) => {
            return {
                phone: i.clientPhone,
                avatar: i.clientAvatar,
                nickName: i.clientName,
                createdAt: i.createAt
            };
        });
    }
    if (userRole.value == 1) {
        if (num.value == 3) {
            title.value = '小区用户';
            res = await userApis.getCustomerList(pageParams.value);

            res.data.records = res.data.records.map((i) => {
                return {
                    phone: i.clientPhone,
                    avatar: i.clientAvatar,
                    nickName: i.clientName,
                    createdAt: i.createAt
                };
            });
        } else {
            title.value = '管家列表';
            res = await userApis.getRecommendList(pageParams.value);
        }
    }
    if (userRole.value == 2) {
        title.value = '运营中心';
        res = await userApis.getRecommendList(pageParams.value);
    }
    if (userRole.value == 4) {
        title.value = '运营中心';
        res = await userApis.getYYList(pageParams.value);

        res.data.records = res.data.records.map((i) => {
            return {
                phone: i.teamLeaderPhone,
                avatar: i.avatar,
                nickName: i.teamLeaderName,
                createdAt: i.createdAt
            };
        });
    }

    if (res.data.current == 1) {
        list.value = res.data;
    } else {
        if (list.value.current != res.data.current) {
            let records = [...list.value.records, ...res.data.records];
            list.value = { ...res.data, records };
        }
    }
};
</script>

<style>
page {
    background-color: #f2f3f5;
}
</style>

<style lang="scss" scoped>
.content {
    padding: 24rpx;

    .card {
        width: 100%;
        padding: 24rpx;
        background: #ffffff;
        border-radius: 16rpx;

        .item {
            padding-bottom: 20rpx;
            margin-bottom: 20rpx;
            border-bottom: 2rpx solid #f2f3f5;
            display: flex;
            align-items: center;
            gap: 36rpx;
            .avatar {
                width: 80rpx;
                height: 80rpx;
                background: #999999;
                border-radius: 50%;
                overflow: hidden;
                image {
                    width: 80rpx;
                    height: 80rpx;
                }
            }
            .info {
                view {
                    font-size: 28rpx;
                    color: #333333;
                    line-height: 40rpx;
                }

                view:last-child {
                    font-size: 24rpx;
                    color: #999999;
                    line-height: 34rpx;
                    margin-top: 6rpx;
                }
            }

            &:last-child {
                padding-bottom: 0;
                margin-bottom: 0;
                border-bottom: none;
            }
        }
    }
}
.noData {
    padding: 30rpx 0;
    text-align: center;
    font-size: 28rpx;
    color: #333;
}
</style>
